<!doctype html>
<html lang="en-US">
  <head>
    <link data-default href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        testHelpers: { createDirectLineEmulator },
        WebChat: {
          internal: { InjectStyleElements }
        }
      } = window;

      function createLinkStyleSheet(href) {
        const linkElement = document.createElement('link');

        linkElement.dataset['testid'] = 'style';
        linkElement.setAttribute('href', href);
        linkElement.setAttribute('rel', 'stylesheet');
        linkElement.setAttribute('type', 'text/css');

        return linkElement;
      }

      run(async function () {
        const { directLine, store } = createDirectLineEmulator();

        const render = ({ nonce, styleElements, stylesRoot }) =>
          new Promise(resolve =>
            ReactDOM.render(
              <InjectStyleElements at={stylesRoot} nonce={nonce} styleElements={styleElements} />,
              document.getElementById('webchat'),
              resolve
            )
          );

        const linkStyleSheetElement1 = createLinkStyleSheet('./css/1.css');
        const linkStyleSheetElement2 = createLinkStyleSheet('./css/2.css');
        const linkStyleSheetElement3 = createLinkStyleSheet('./css/3.css');

        await render({ styleElements: [linkStyleSheetElement1] });

        // THEN: Should render in red.
        await host.snapshot('local');

        const allInjectedStyles1 = document.head.querySelectorAll('link[data-testid="style"]');

        expect(allInjectedStyles1).toHaveLength(1);
        expect(allInjectedStyles1[0]).toHaveProperty('href', linkStyleSheetElement1.href);

        await render({ styleElements: [linkStyleSheetElement1, linkStyleSheetElement2] });

        // THEN: Should render in orange (2.css is preferred over others).
        await host.snapshot('local');

        const allInjectedStyles2 = document.head.querySelectorAll('link[data-testid="style"]');

        expect(allInjectedStyles2).toHaveLength(2);
        expect(allInjectedStyles2[0]).toHaveProperty('href', linkStyleSheetElement1.href);
        expect(allInjectedStyles2[1]).toHaveProperty('href', linkStyleSheetElement2.href);

        await render({ styleElements: [linkStyleSheetElement1, linkStyleSheetElement2, linkStyleSheetElement3] });

        // THEN: Should render in yellow (3.css is preferred over others).
        await host.snapshot('local');

        const allInjectedStyles3 = document.head.querySelectorAll('link[data-testid="style"]');

        expect(allInjectedStyles3).toHaveLength(3);
        expect(allInjectedStyles3[0]).toHaveProperty('href', linkStyleSheetElement1.href);
        expect(allInjectedStyles3[1]).toHaveProperty('href', linkStyleSheetElement2.href);
        expect(allInjectedStyles3[2]).toHaveProperty('href', linkStyleSheetElement3.href);
      });
    </script>
  </body>
</html>
